<template>
  <a-modal
      :title="title"
      :width="500"
      :visible="visible"
      :confirmLoading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      cancelText="关闭"
      wrapClassName="ant-modal-cust-warp"
      style="top:5%;height: 85%;overflow-y: hidden">
    <a-tree
        :checkable="true"
        :checkedKeys="checkedKeys"
        @check="handleCheck"
        :checkStrictly="true"
        :tree-data="treeData"
        :defaultExpandAll="true"
        :replaceFields="{ key:'id',title:'name',children:'children'}"
    />
  </a-modal>
</template>

<script>
import {menuTree} from '@/services/menu'
import {authorized, auths} from '@/services/role'

export default {
  name: "Roles",
  data() {
    return {
      title: "授权",
      visible: false,
      role: {},
      checkedKeys: [],
      submitKeys: [],
      confirmLoading: false,
      treeData: [],
    }
  },
  mounted() {
    this.initDict()
  },
  methods: {
    close() {
      this.$emit('close');
      this.visible = false;
      this.checkedKeys = []
    },
    handleCheck(checkedKeys) {
      this.checkedKeys = checkedKeys.checked;
    },
    handleOk() {
      this.submit();
    },
    echo(id) {
      //先回显数据
      auths(id).then(resp => {
        const {code, msg, data} = resp.data
        if (code === 200) {
          this.checkedKeys = data
        } else {
          this.$message.warning(msg);
        }
      })
    },
    submit() {
      console.log('$f=>submit', this.submitKeys);
      authorized(this.role.id, this.checkedKeys).then((res) => {
        const {code, msg, data} = res.data
        if (code === 200) {
          this.$message.success("授权成功!");
          this.visible = false;
        } else {
          this.$message.warn("授权失败!");
        }
      })
    },
    handleCancel() {
      this.close()
    },

    initDict() {
      menuTree().then(resp => {
        const {code, msg, data} = resp.data
        if (code === 200) {
          this.treeData = data
        } else {
          this.$message.warning(msg);
        }
      })
    }
  }
}
</script>

<style scoped>
</style>
